<template>
    <cateGorymenu
    ></cateGorymenu>
    <div class="region region--full">
      <comImg :imgData="imgData"></comImg>
    </div>
    <div class='container container--masthead Thin masthead--expanded'>
        <!-- 一期先不写 -->
        <!-- <div class='region region--full removeLive'>
            <tabText :listlinkData='retireList' :moreList='moreList'></tabText>
        </div> -->
        
        <div class='region region--primary'>
            <pageHead :titleData='titleData'></pageHead>
            <inverTingContent :titleName='titleName' :topContData='topContData' v-if="isCont"></inverTingContent>
            <div class='component component--module section-grid'>
                <oneTitleImgMoudle :headTitle='false' :retireTitle='true' :seeMore='false'
                    :fourTitleImgData='threeTitleImgData' v-if="isShow && threeTitleImgData.length > 0">
                </oneTitleImgMoudle>
            </div>
            <div class="component component--module more-headlines">
                <header class="header header--primary">
                    <h2 class="title">
                        <span class="label">{{ moreNewTitle }}</span>
                    </h2>
                </header>
                <futures :newsData='newsLData' :istime="true"></futures>
                <whereRetire style='margin-top:20px;'></whereRetire>
            </div>
        </div>
        <stickys :sticky="sticky"></stickys>
        <mastPopular></mastPopular>
        <div class='region region--primary'>
            <div class="component component--module more-headlines" style='margin-top:50px;'>
                <header class="header header--primary">
                    <h2 class="title">
                        <span class="label">More from Retirement</span>
                    </h2>
                </header>
                <futures :newsData='newsLData1' :istime="true"></futures>
                <!-- <div class="group group--buttons cover">
                    <button class="btn btn--secondary js--more-headlines">
                        See More
                    </button>
                    <button class="btn btn--primary js-search-top" @click='toTop'>
                        Back to Top
                    </button>
                </div> -->
            </div>
        </div>
        <stickys :sticky="sticky"></stickys>
        <adverTiseMent></adverTiseMent>
    </div>
</template>
<script setup>
import cateGorymenu from '../latestNews/cateGorymenu/cateGorymenu.vue';
import tabText from '../../components/tabText/tabText.vue';
import pageHead from '../../components/pageHead/pageHead.vue';
import inverTingContent from '../inverting/inverTingContent/inverTingContent.vue';
import oneTitleImgMoudle from '../../components/oneTitleImgMoudle/oneTitleImgMoudle.vue';
import futures from '../inverting/futures/futures.vue';
import { userRetireArrays } from '../../api/retireMent';
import whereRetire from './whereRetire/whereRetire.vue';
import mastPopular from '../home/mastPopular/mastPopular.vue';
import adverTiseMent from '../home/adverTisement/adverTiseMent.vue';
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
import homeRequest from "@/api/home.js";
const { rightContData, latestData, districtData } = userRetireArrays()
const moreList = ref([])
const titleData = reactive({
    title: "Retirement",
    link: 'Home',
    name: 'Retirement',
    name1: ""
})
let topContData = reactive({
    headline: '',
    src: "",
    uuid: '',
    author: '',
    rightContData: [],
    smallTwoImg: []
})
const isCont = ref(false)
const threeTitleImgData = ref([])
const isShow = ref(false)
const moreNewTitle = ref('')
const newsLData = ref([])
const newsLData1 = ref([])
const tabKey = ref('retirement')
const isL = ref(false)
const toTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
const titleName = reactive({
    name: '',
    info: ''
})
const retireList = ref([])
onMounted(() => {
    const data = localStorage.getItem('tabMdData')
    retireList.value = JSON.parse(data).retirement
    let name = window.sessionStorage.getItem("titleData");
    if (name) {
    titleData.title = JSON.parse(name).typeName;
    titleData.name1 = titleData.title;
    tabKey.value = JSON.parse(name).typeKey;
    }
    getNewList(tabKey.value)
    getLanList()
    getMdList(tabKey.value)
})
// 新闻列表
const getNewList = (tabKey) => {
    let data = {
        key: tabKey  //当前页面
    }
    homeRequest.newsData(data)
        .then((res) => {
            if (res.data.ap !== null) {
                if (res.data.records.length > 0) {
                    let rightContData = []
                    const length = res.data.records.length
                    if (res.data.records.length > 7) {
                        rightContData = res.data.records.slice(3, 8)
                    } else {
                        rightContData = res.data.records.slice(3, length)
                    }
                    titleName.info = res.data.records[0].summary
                    topContData = ({
                        headline: res.data.records[0].title,
                        src: res.data.records[0].imgUrl,
                        uuid: res.data.records[0].uuid,
                        author: res.data.records[0].author,
                        rightContData: rightContData,
                        smallTwoImg: []
                    })
                    isCont.value = true
                    //更多新闻标题
                }
            }
        })
}
// 获取新闻底部栏目接口
const getLanList = () => {
    homeRequest.newsGroupData({})
        .then((res) => {
            threeTitleImgData.value = res.data
            if (threeTitleImgData.value.length > 0) {
                threeTitleImgData.value.forEach((item) => {
                    if (item.news.length > 0) {
                        item.imgUrl = item.news[0].imgUrl
                        item.title = item.news[0].title
                        item.uuid = item.news[0].uuid
                    }
                    item.news = item.news.slice(1)
                })
            }
            isShow.value = true
        })
}
// 模块
const getMdList = (tabKey) => {
    let data = {
        key: tabKey  //当前页面
    }
    homeRequest.getgroupData(data).then((res) => {
        if (res.data.ap !== null) {
            if (res.data.ap.news.length > 0) {
                moreNewTitle.value = res.data.ap.author
                newsLData.value = res.data.ap.news
            }
        }
        if (res.data.ap !== null) {
            if (res.data.auto.news.length > 0) {
                moreNewTitle.value = res.data.auto.author
                newsLData1.value = res.data.auto.news
            }
        }
    })
}
</script>
<style scoped lang='scss'></style>